import { Checkbox, Menu, Button, Paper, Table, LoadingOverlay, Box, Center, Space, Text, Flex, Pagination, ScrollArea } from '@mantine/core';
import { IconBox } from '@tabler/icons-react';
import { useState, useEffect } from "react";

export function MyTable({
    columns = [],
    data = [],
    pageNo = 1,
    pageSize = 10,
    total = 0,
    visible,
    onPageChange = (p, ps) => { },
    onCheckChange = (ids) => { }
}) {
    const [selectedRows, setSelectedRows] = useState([]);
    const [thCheckType, setThCheckType] = useState("");
    const ThCheckBox = <Table.Th style={{ backgroundColor: '#fff' }}>
        <Checkbox radius='sm' checked={thCheckType === 'checked'} indeterminate={thCheckType === 'indeterminate'} onChange={() => {
            if (selectedRows.length === data.length) {
                setSelectedRows([]);
            } else {
                setSelectedRows(data.map(item => item.id));
            }
        }} />
    </Table.Th>

    const th = [ThCheckBox].concat(columns.map(col => (
        <Table.Th style={{ backgroundColor: '#fff' }}>{col.title}</Table.Th>
    )));

    useEffect(() => {
        if (selectedRows.length && (selectedRows.length === data.length)) {
            setThCheckType('checked');
        } else if (selectedRows.length && (selectedRows.length !== data.length)) {
            setThCheckType('indeterminate');
        } else if (!selectedRows.length) {
            setThCheckType('');
        }
        onCheckChange(selectedRows);
    }, [selectedRows])

    useEffect(() => {
        setSelectedRows([])
    }, [data])

    const rows = data.map(row => (
        <Table.Tr key={row.id}>
            <Table.Td>
                <Checkbox
                    checked={selectedRows.includes(row.id)}
                    radius='sm'
                    onChange={(event) =>
                        setSelectedRows(
                            event.currentTarget.checked
                                ? [...selectedRows, row.id]
                                : selectedRows.filter((position) => position !== row.id)
                        )
                    }
                />
            </Table.Td>
            {
                columns.map(td => (
                    <Table.Td>{td.render ? td.render(row) : (row[td.key] === undefined || row[td.key] === '') ? '-' : row[td.key]}</Table.Td>
                ))
            }
        </Table.Tr >
    ));
    return (
        <>
            <Paper className='paper' shadow="lg" radius="md" p="lg" style={{ width: '100%', overflow: 'hidden' }}>
                <Box className='box' pos="relative" style={{ width: '100%', height: '100%' }}>
                    <LoadingOverlay visible={visible} zIndex={101} overlayProps={{ radius: "sm", blur: 2 }} transitionProps={{ duration: 200 }} />
                    {
                        total ?
                            <Flex className='fffff' direction="column" align="flex-end" style={{ width: '100%', height: '100%' }}>
                                <ScrollArea style={{ width: '100%', flex: 'auto', marginBottom: 20, paddingRight: 10 }}>
                                    <Table stickyHeader stickyHeaderOffset={0} style={{ width: '100%', marginBottom: 20, position: 'relative' }} verticalSpacing="sm" highlightOnHover  >
                                        <Table.Thead style={{ backgroundColor: '#fff', zIndex: 100 }}>
                                            <Table.Tr style={{ backgroundColor: '#fff' }}>{th}</Table.Tr>
                                        </Table.Thead>
                                        <Table.Tbody>{rows}</Table.Tbody>
                                    </Table>
                                </ScrollArea>
                                <Flex align="center" style={{ flex: 'none' }}>
                                    <div style={{ fontSize: 14, marginRight: 10 }}>共{total}条</div>
                                    <Menu shadow="md" style={{ height: 32, marginRight: 10 }}>
                                        <Menu.Target>
                                            <Button variant="default">{pageSize}条/页</Button>
                                        </Menu.Target>

                                        <Menu.Dropdown>
                                            <Menu.Item onClick={() => onPageChange(1, 5)}>5条/页</Menu.Item>
                                            <Menu.Item onClick={() => onPageChange(1, 10)}>10条/页</Menu.Item>
                                            <Menu.Item onClick={() => onPageChange(1, 20)}>20条/页</Menu.Item>
                                            <Menu.Item onClick={() => onPageChange(1, 50)}>50条/页</Menu.Item>
                                        </Menu.Dropdown>
                                    </Menu>
                                    <Pagination total={Math.ceil(total / pageSize)} value={pageNo} defaultValue={pageNo} onChange={onPageChange} />
                                </Flex>
                            </Flex>
                            :
                            <Center style={{ marginTop: '50px' }}>
                                <Flex direction="column" align="center">
                                    <IconBox color="#999" size={50}></IconBox>
                                    <Space h="sm"></Space>
                                    <Text c="#999" align="center" size="sm">暂无数据</Text>
                                    <Space h="xl"></Space>
                                </Flex>
                            </Center>
                    }
                </Box>
            </Paper>
        </>
    );
}